<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.staticfile.org/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.css">

    <link href="/css/common.css?v=2" rel="stylesheet">

    <title>Data Life</title>
</head>
<body>
<div class="container" id="app-main" v-cloak>
    <div class="row" style="padding-top: 10%">
        <div class="col-3">
            <p class="text-right"><a href="/record/index.html" class="btn btn-light">首页</a></p>
        </div>
        <div class="col-6">
            <h3 class="text-center">{{ record.name }}</h3>
        </div>
        <div class="col-3">
            <div class="dropdown">
                <button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown">切换</button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#" @click="goMonth">月</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" @click="goYear">年</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-right">
            <span @click="weekOffset(-1)" class="custom-icon">
                <span class="fas fa-angle-left"></span>
            </span>
        </div>
        <div class="col-8">
            <input type='text' class="form-control text-center" id='date' v-model="recordDate" readonly/>
        </div>
        <div class="col-2">
            <span @click="weekOffset(1)" class="custom-icon">
                <span class="fas fa-angle-right"></span>
            </span>
        </div>
    </div>
    <div class="row" style="margin-top: 5%">
        <div class="col-12 custom-block">
            <p class="text-center custom-week"><span class="custom-weekend">日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span class="custom-weekend">六</span></p>
            <p class="text-center"><span v-for="(day, index) in week" @click="clickDay(index)" :class="{ 'custom-active': index == dayIndex }"><span :class="{ 'custom-day': !(index == dayIndex) }">{{ day.day }}</span><br>{{ day.sum != null ? day.sum : '' }}</span></p>
        </div>
    </div>
    <div class="row" style="margin-top: 5%">
        <div class="col-12">
            <form v-for="(recordItem, index) in week[dayIndex].items">
                <div class="form-group row" @dblclick="clickExtra(index)">
                    <div class="col-3">
                        <input type="number" class="form-control" v-model="recordItem.value">
                    </div>
                    <div class="col-7">
                        <div class="input-group">
                            <input type="text" class="form-control" v-model="recordItem.comment">
                            <div class="input-group-append">
                                <span class="input-group-text" class="custom-icon">
                                    <span class="fas fa-edit" @click="clickUpdate(index)"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-2">
                        <span class="custom-icon">
                            <span class="fas fa-minus" @click="clickDelete(index)"></span>
                        </span>
                    </div>
                </div>
            </form>

            <form>
                <div class="form-group row">
                    <div class="col-3">
                        <input type="number" class="form-control" v-model="value" placeholder="数值">
                    </div>
                    <div class="col-7">
                        <input type="text" class="form-control" v-model="comment" placeholder="备注">
                    </div>
                    <div class="col-2">
                        <span class="custom-icon"><span class="fas fa-plus" @click="clickCreate"></span></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.slim.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.26.0/axios.min.js"></script>

<script src="https://cdn.staticfile.org/moment.js/2.29.1/moment.min.js"></script>
<script src="https://kit.fontawesome.com/e78d7410b3.js" crossorigin="anonymous"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>

<script src="/js/env.js?v=1"></script>
<script src="/js/common.js?v=2"></script>
<script>
    // let serverData = {"list":[{"day":28,"date":"2020-06-28","items":[{"id":"2126","record_id":"3","record_date":"2020-06-28","value":"3615","comment":"房贷"}],"sum":"3615"},{"day":29,"date":"2020-06-29","items":[{"id":"2129","record_id":"3","record_date":"2020-06-29","value":"-300","comment":"礼物公司报销"},{"id":"2134","record_id":"3","record_date":"2020-06-29","value":"300","comment":"余额宝"}],"sum":"0"},{"day":30,"date":"2020-06-30","items":[],"sum":null},{"day":1,"date":"2020-07-01","items":[],"sum":null},{"day":2,"date":"2020-07-02","items":[],"sum":null},{"day":3,"date":"2020-07-03","items":[],"sum":null},{"day":4,"date":"2020-07-04","items":[],"sum":null}],"record_date":"2020-07-03","record":{"id":3,"name":"支出"},"day_index":5};
    // let vm = initVueApp();
    // initApp();

    let serverData, vm;

    axios.get(env.apiPrefix + '/records/week', {params: buildParams(["record_id", "record_date"])})
        .then(function (response) {
            if (response.data.code) {
                return;
            }
            serverData = response.data.data;
            vm = initVueApp();
            initApp();
        });

    function initVueApp() {
        return new Vue({
            el: '#app-main',
            data: {
                canSave: true,
                week: serverData.list,
                dayIndex: serverData.day_index,
                record: serverData.record,
                value: null,
                comment: null,
                recordDate: serverData.record_date
            },
            methods: {
                clickDay: function (index) {
                    this.recordDate = this.week[index].date;
                    this.value = null;
                    this.comment = null;
                    this.dayIndex = index;
                },
                clickUpdate: function (index) {
                    let r = confirm("是否确定修改");
                    if (r == false) {
                        return false;
                    }
                    let week = this.week[this.dayIndex];
                    let recordItem = week.items[index];

                    let requestData = {
                        value: recordItem.value,
                        comment: recordItem.comment
                    };
                    axios.put(generateUrl('/record-items/' + recordItem.id, {}, env.apiPrefix), requestData)
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            week.sum = getSum(week.items);
                        });
                },
                clickExtra: function (index) {
                    window.location.href = generateUrl('/record/extra.html', {record_item_id: this.week[this.dayIndex].items[index].id, record_id: this.record.id});
                },
                clickDelete: function (index) {
                    let r = confirm("是否确定删除");
                    if (r == false) {
                        return false;
                    }

                    let week = vm.week[vm.dayIndex];
                    let recordItem = week.items[index];

                    axios.delete(generateUrl('/record-items/' + recordItem.id, {}, env.apiPrefix), {})
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            week.sum -= recordItem.value;
                            week.items.splice(index, 1);
                        });
                },
                clickCreate: function () {
                    if (!this.canSave) {
                        return false;
                    }
                    this.canSave = false;

                    let requestData = {
                        record_id: this.record.id,
                        record_date: this.recordDate,
                        value: this.value,
                        comment: this.comment
                    };
                    axios.post(generateUrl('/record-items', {}, env.apiPrefix), requestData)
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            let week = vm.week[vm.dayIndex];
                            let recordItem = {
                                id: response.data.data.id,
                                value: requestData.value,
                                comment: requestData.comment
                            };
                            week.items.push(recordItem);
                            week.sum = parseInt(week.sum ? week.sum : 0) + parseInt(recordItem.value);

                            vm.value = null;
                            vm.comment = null;
                            vm.canSave = true;
                        }).catch(function (error) {
                            vm.canSave = true;
                        });
                },
                weekOffset: function (offset) {
                    let requestData = {
                        record_id: this.record.id,
                        record_date: this.recordDate,
                        week_offset: offset
                    };

                    axios.get(generateUrl('/records/week', {}, env.apiPrefix), {params: requestData})
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            vm.week = response.data.data.list;
                            vm.weekIndex = response.data.data.week_index;
                            vm.recordDate = response.data.data.record_date;
                        });
                },
                goMonth: function () {
                    window.location.href = generateUrl('/record/month.html', {record_id: vm.record.id, record_date: vm.recordDate});
                },
                goYear: function () {
                    window.location.href = generateUrl('/record/analysis/line-single.html', {record_id: vm.record.id, record_date: vm.recordDate});
                }
            }
        });
    }

    function getSum(items) {
        if (items.length == 0) {
            return null;
        }

        let sum = 0;
        for (let i = 0; i < items.length; ++i) {
            sum += parseInt(items[i].value);

        }

        return sum;
    }

    function initApp() {
        $(function () {
            $('#date').datetimepicker(
                {
                    format: 'YYYY-MM-DD',
                    defaultDate: vm.recordDate,
                    locale: 'zh-tw',
                    ignoreReadonly: true
                }
            ).on('dp.change', function (e) {
                if (e.date) {
                    if (e.date.format('w') == e.oldDate.format('w')) {
                        vm.recordDate = e.date.format('YYYY-MM-DD');
                        vm.dayIndex = e.date.format('e');
                        return;
                    }

                    let requestData = {
                        record_id: vm.record.id,
                        record_date: e.date.format('YYYY-MM-DD')
                    };

                    axios.get(generateUrl('/records/week', {}, env.apiPrefix), {params: requestData})
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            vm.week = response.data.data.list;
                            vm.weekIndex = response.data.data.week_index;
                            vm.recordDate = response.data.data.record_date;
                        });
                } else {
                    alert('Datetime Picker error!')
                }
            });
        });
    }
</script>
</body>
</html>
